<template>
	<el-row id="container">
		<Header></Header>
		<el-col :span="24" id="outter_container">
			<el-col :span="14" :offset="5" id="content_container">

				<el-col :span="24" id="blocktitle">
					<div id="title"> 区块 </div>

					<el-breadcrumb separator="/" id="breadcrumb">
						<el-breadcrumb-item id="breadcrumblink" :to="{ path: '/' }">主页</el-breadcrumb-item>
						<el-breadcrumb-item id="currentpage">区块</el-breadcrumb-item>
					</el-breadcrumb>
				</el-col>

				<el-col :span="24" id="searchtool">

					<el-col :span="8" class="ncon">
						<el-col :span="9" id="blocknumtitle">
							<span id="blocknumtitlespan">区块编号：</span>
						</el-col>
						<el-col :span="14" class="inputcontainer">
							<el-input id="blocknum" placeholder="请输入内容" size="medium" v-model="blocknum" clearable @input="blocksearch()" v-bind:disabled="this.inputflag1"></el-input>
						</el-col>
					</el-col>

					<el-col :span="8" class="ncon">
						<el-col :span="9" id="blockidtitle">
							<span id="blockidtitlespan">区块ID：</span>
						</el-col>
						<el-col :span="14" class="inputcontainer">
							<el-input id="blockid" placeholder="请输入内容" size="medium" v-model="blockid" clearable @input="blocksearch()" v-bind:disabled="this.inputflag2"></el-input>
						</el-col>
					</el-col>

					<el-col :span="4" id="searchbtn">
						<el-button icon="el-icon-search" circle v-on:click="queryblock"></el-button>
					</el-col>

				</el-col>

				<el-col :span="24" id="blocksinfo">

					<el-table :data="tableData" height="100%" style="width: 100%" :row-style="rowClass" @row-click="readdetail" id="blocksinfotable">
						<el-table-column prop="number" width="180%" label="编号" align="left"></el-table-column>
						<el-table-column prop="hash" label="区块ID" align="left"></el-table-column>
						<el-table-column width="30%"/>
						<el-table-column prop="mineTime" width="200%" label="时间" align="left" :formatter="timeformatter"></el-table-column>
						<el-table-column prop="txs" width="160%" label="交易数" align="left"></el-table-column>
					</el-table>

				</el-col>

				<el-col :span="24" id="paging">
					<el-pagination id="pagingc" background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total"></el-pagination>
				</el-col>

			</el-col>
		</el-col>
		<Footer></Footer>
	</el-row>
</template>

<script>

	import Header from '../components/header1.vue'
	import Footer from '../components/footer.vue'

	export default {

		components: { 
			Header, 
			Footer 
		},

		data () {
			return {
				list: "",
				blockid: "",
				blocknum: "",
				inputflag1: false,
				inputflag2: false,
				total: 0, 
			    tableData: null,
			    currentPage: 1,
			    fflag: 1
			}
		},

		created () {
			// this.current_time = parseInt(new Date().valueOf() / 1000)
		},

		mounted () {
			this.setData()
		},

		destroyed () {
			eventBus.$emit('blockdetail',this.list)
		},

		methods: {

			rowClass: function (row, index) {
				return { 
					"cursor": "pointer"
					// "font-size": "0.77vw"
				}
			},

			timeformatter: function(row, column) {
				let date
				if(row.mineTime.toString().length===10)
				{
					date = new Date(row.mineTime * 1000)
				} else {
					date = new Date(row.mineTime)
				}
				let a = [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
				function paddNum(s) {
					s += ""
					return s.replace(/^(\d)$/,"0$1");
				}
				let h = paddNum(date.getHours());
				let m = paddNum(date.getMinutes());
				let s = paddNum(date.getSeconds());
				a = a + " " + h + ":" + m + ":" + s
				// if (date.getHours() < 12) {
				// 	a = a + " AM"
				// } else {
				// 	a = a + " PM"
				// }
				return a;
			},
			//跳转到区块详细信息页面
			readdetail(row, event, column) {
				let param = {hash:row.hash}
				this.$api.post('blockchain/block', param, r => {
					this.list = r
					this.$router.push(`/blocks/${JSON.stringify(r.data.hash)}`)
				})
			},
			//区块信息查询
			queryblock () {
				if (this.blocknum === "" && this.blockid === "") {
					alert("搜索内容为空")
				} else {
					let param
					if (this.blockid === "") {
						param = {number:parseInt(this.blocknum)}
					} else if (this.blocknum === "") {
						param = {hash:this.blockid}
					}
					this.$api.post('blockchain/block', param, success => {
						this.list = success
						this.$router.push(`/blocks/${JSON.stringify(success.data.hash)}`)
					}, failure => {
						alert("该区块不存在")
					})
				}
			},

			blocksearch () {
				if (this.blockid === "" && this.blocknum === "") {
					this.inputflag1 = false
					this.inputflag2 = false
				} else if (this.blockid != "") {
					this.blocknum = ""
					this.inputflag1 = true
				} else if (this.blocknum != "") {
					this.blockid = ""
					this.inputflag2 = true
				}
			},

			setData (){
				let param
				if (this.fflag != 1) {
					param = {
						number:this.total,
						itemsPerPage:10,
						whichPage:this.currentPage
					}
				} else if(this.fflag === 1){
					param = {
						itemsPerPage:10,
						whichPage:this.currentPage
					}
					this.fflag = 0
				}
				this.$api.post('blockchain/blocks', param, r => {
					this.tableData = r.data
					if (this.total === 0) {
						this.total = r.data[0].number
					}
				})
			},

			handleSizeChange(val){
              // this.pageSize = val;
              // this.currentPage = 1;
              // this.fetchData(1, val);
              // console.log(`每页 ${val} 条`);
            },

            handleCurrentChange(val){
              this.currentPage = val
              this.tableData = this.setData()
            }
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

	#currentpage>>>.el-breadcrumb__inner{
		font-size: 0.9vw;
		color: #1DB2BF;
	}

	#breadcrumblink>>>.el-breadcrumb__inner{
		font-size: 0.9vw;
		font-weight: 400;
	}

	#breadcrumblink>>>.el-breadcrumb__inner.is-link:hover {
		color: #1DB2BF;
	}

	#breadcrumb {
		float: right;
		/*font-size: 0.83vw;*/
		position: relative;
        top: 50%; 
        margin-top: -1.1vw;
	}

	#container {
		position: absolute;
		margin-top: 0px;
		margin-bottom: 0px;
		height: 100%;
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	#outter_container {
		height: 82.6%;
		margin-top: 4.5px;
	}

	#content_container {
		height: 100%;
		background-color: rgb(248, 248, 248);
		padding: 18px;
		padding-top: 10px;
	}

	#searchtool {
		margin-top: 0.8%;
		margin-bottom: 1%;
		height: 6%;
	}

	.ncon {
		height: 100%;
	}

	#searchbtn {
		margin-left: 1.8%;
		position: relative;
        top: 50%;
        margin-top: -40.5px;
	}

	#blocktitle {
		height: 8.1%;
		border-bottom:2px solid #E6E6E6;
	}

	#title {
		font-size: 1.2vw;
		position: relative;
        top: 50%; 
        margin-top: -1vw;
		/*border-bottom:2px solid #E6E6E6;*/
	}

	#blocknumtitle {
		/*margin-top: 1.9%;*/
		text-align: center;
		/*font-size: 146%;*/
		position: relative;
        top: 50%;
        margin-top: -0.8vw;
		font-size: 1.1vw;
	}

	.inputcontainer {
		/*margin-top: 1%;*/
		/*float: left;*/
		position: relative;
        top: 50%; /*偏移*/
        margin-top: -40px;
	}

	#blocknumtitlespan {
		float: right;
		margin-right: 0.3vw;
	}

	#blockidtitle {
		position: relative;
        top: 50%;
        margin-top: -0.8vw;
		font-size: 1.1vw;
	}

	#blockidtitlespan {
		float: right;
		margin-right: 0.3vw;
	}

	#blocksinfotable {
		text-align: center;
	}

	#blocksinfo {
		height: 78%;
		margin-bottom: 1%;
	}

	#paging {
		text-align: center;
		height: 4.1%;
	}

	#pagingc {
		position: relative;
        top: 50%;
        margin-top: -14px;
	}

</style>